<template>
  <div class="qyxx-container">
    <!-- 面包屑导航 -->
    <div class="breadcrumb-container">
      <span class="breadcrumb-home">首页</span> /
      <span class="breadcrumb-middle">个人中心</span> /
      <span class="breadcrumb-active">企业信息</span>
    </div>
    <!-- 主体内容 -->
    <div class="user-center">
      <div class="sidebar">
        <ul>
          <li class="sidebar-item active" @click="goToQyxx">
            <img src="/public/images/个人中心/u673.svg" alt="企业信息图标" class="sidebar-icon" />
            <span class="sidebar-text">企业信息</span>
          </li>
          <li class="sidebar-item" @click="goToParticipateBid">
            <img src="/public/images/个人中心/u674.svg" alt="参与投标图标" class="sidebar-icon" />
            <span class="sidebar-text">参与投标</span>
          </li>
          <li class="sidebar-item" @click="goToMyBid">
            <img src="/public/images/个人中心/u675.svg" alt="我的投标图标" class="sidebar-icon" />
            <span class="sidebar-text">我的投标</span>
          </li>
        </ul>
      </div>
      <div class="company-info">
        <div class="company-header">
          <div class="company-name">
            <span class="info-label">企业名称:</span>
            <span class="info-value">大连素食有限公司</span>
          </div>
          <div class="credit-code">
            <span class="info-label">统一的社会信用代码:</span>
            <span class="info-value">2012000043245689567</span>
          </div>
        </div>
        <div class="info-columns">
          <div class="info-column">
            <div class="info-row">
              <span class="info-label">公司注册地:</span>
              <span class="info-value">辽宁大连金普新区和平路56号</span>
            </div>
            <div class="info-row">
              <span class="info-label">机构类型:</span>
              <span class="info-value">企业机构</span>
            </div>
            <div class="info-row">
              <span class="info-label">成立日期:</span>
              <span class="info-value">2021-05-13日</span>
            </div>
            <div class="info-row">
              <span class="info-label">法人/负责人:</span>
              <span class="info-value">李华</span>
            </div>
            <div class="info-row">
              <span class="info-label">单位联系地:</span>
              <span class="info-value">辽宁大连金普新区和平路56号</span>
            </div>
            <div class="info-row">
              <span class="info-label">经营范围:</span>
              <span class="info-value">饮食</span>
            </div>
            <div class="info-row">
              <span class="info-label">开户行:</span>
              <span class="info-value">大连银行</span>
            </div>
            <div class="info-row">
              <span class="info-label">开户行地:</span>
              <span class="info-value">辽宁大连金普新区农贸街65号</span>
            </div>
            <div class="info-row">
              <span class="info-label">单位注册电话:</span>
              <span class="info-value">8657-4321</span>
            </div>
            <div class="info-row">
              <span class="info-label">单位注册电话:</span>
              <span class="info-value">8657-4321</span>
            </div>
            <div class="info-row">
              <span class="info-label">注册资本 (万元):</span>
              <span class="info-value">200.00</span>
            </div>
          </div>
          <div class="info-column">
            <div class="info-row">
              <span class="info-label">企业性质:</span>
              <span class="info-value">私营企业</span>
            </div>
            <div class="info-row">
              <span class="info-label">法人/负责人身份证:</span>
              <span class="info-value">210282198706235543</span>
            </div>
            <div class="info-row">
              <span class="info-label">法人/负责人身份证扫描件:</span>
              <a href="#" class="view-img-link">查看图片</a>
            </div>
            <div class="info-row">
              <span class="info-label">公司简介:</span>
              <span class="info-value">致力于研究素食美味</span>
            </div>
            <div class="info-row">
              <span class="info-label">营业执照有效期:</span>
              <span class="info-value">2021/5/13 - 2028/5/13</span>
            </div>
            <div class="info-row">
              <span class="info-label">营业执照扫描件:</span>
              <a href="#" class="view-img-link">查看图片</a>
            </div>
            <div class="info-row">
              <span class="info-label">银行账号:</span>
              <span class="info-value">63299427971907320931709</span>
            </div>
            <div class="info-row">
              <span class="info-label">单位注册地:</span>
              <span class="info-value">辽宁省大连市金普新区和平路56号</span>
            </div>
            <div class="info-row">
              <span class="info-label">实缴资本:</span>
              <span class="info-value">100.00万元</span>
            </div>
            <div class="info-row">
              <span class="info-label">开户许可证/基本户存款信息证:</span>
              <a href="#" class="view-img-link">查看图片</a>
            </div>
          </div>
        </div>
        <div class="edit-button-container">
          <button class="edit-button" @click="showModal = true">修改</button>
          <button class="return-button" @click="goToGrzx">返回</button>
        </div>
      </div>
    </div>
    <!-- 修改企业信息模态框 -->
    <div v-if="showModal" class="modal-overlay">
      <div class="modal">
        <h3>修改企业投标</h3>
        <button class="close-button" @click="showModal = false">×</button>
        <form @submit.prevent="submitEdit">
          <div class="form-columns">
            <div class="info-column left">
              <div class="form-group">
                <label for="companyAddress">*公司注册地址</label>
                <input type="text" id="companyAddress" v-model="editInfo.companyAddress" required />
              </div>
              <div class="form-group">
                <label for="companyType">*企业性质</label>
                <select id="companyType" v-model="editInfo.companyType" required>
                  <option value="">请选择</option>
                  <!-- 其他选项 -->
                </select>
              </div>
              <div class="form-group">
                <label for="legalPerson">*法人/负责人</label>
                <input type="text" id="legalPerson" v-model="editInfo.legalPerson" required />
              </div>
              <div class="form-group">
                <label for="unitAddress">*单位联系地址</label>
                <input type="text" id="unitAddress" v-model="editInfo.unitAddress" required />
              </div>
              <div class="form-group">
                <label for="businessLicense">*营业执照扫描件</label>
                <input type="file" id="businessLicense" @change="handleFileUpload" />
              </div>
              <div class="form-group">
                <label for="businessLicenseExpiry">*营业执照有效期</label>
                <input type="text" id="businessLicenseExpiry" v-model="editInfo.businessLicenseExpiry" required />
              </div>
              <div class="form-group">
                <label for="legalPersonIdCard">*法人/负责人身份证扫描件</label>
                <input type="file" id="legalPersonIdCard" @change="handleFileUpload" />
              </div>
            </div>
            <div class="info-column right">
              <div class="form-group">
                <label for="establishDate">*成立日期</label>
                <input type="date" id="establishDate" v-model="editInfo.establishDate" required />
              </div>
              <div class="form-group">
                <label for="legalPersonId">*法人/负责人身份证</label>
                <input type="text" id="legalPersonId" v-model="editInfo.legalPersonId" required />
              </div>
              <div class="form-group">
                <label for="businessScope">*经营范围</label>
                <select id="businessScope" v-model="editInfo.businessScope" required>
                  <option value="">请选择</option>
                  <option value="美食">美食</option>
                  <option value="建筑">建筑</option>
                  <option value="科技">科技</option>
                  <option value="教育">教育</option>
                  <option value="金融">金融</option>
                </select>
              </div>
              <div class="form-group">
                <label for="companyIntro">*公司简介</label>
                <input type="text" id="companyIntro" v-model="editInfo.companyIntro" required />
              </div>
              <div class="form-group">
                <label for="bankAccount">*开户行</label>
                <input type="text" id="bankAccount" v-model="editInfo.bankAccount" required />
              </div>
              <div class="form-group">
                <label for="bankAccountAddress">*开户行地址</label>
                <input type="text" id="bankAccountAddress" v-model="editInfo.bankAccountAddress" required />
              </div>
              <div class="form-group">
                <label for="registeredCapital">*单位注册地址</label>
                <input type="text" id="registeredCapital" v-model="editInfo.registeredCapital" required />
              </div>
              <div class="form-group">
                <label for="unitPhone">*单位注册电话</label>
                <input type="text" id="unitPhone" v-model="editInfo.unitPhone" required />
              </div>
              <div class="form-group">
                <label for="registeredCapitalAmount">*注册资本 (万元)</label>
                <input type="number" id="registeredCapitalAmount" v-model="editInfo.registeredCapitalAmount" required />
              </div>
              <div class="form-group">
                <label for="depositInfo">*开户许可证/基本户存款信息证</label>
                <input type="file" id="depositInfo" @change="handleFileUpload" />
              </div>
            </div>
          </div>
          <div class="form-buttons">
            <button type="button" @click="showModal = false">取消</button>
            <button type="submit">确定</button>
          </div>
        </form>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';

const router = useRouter();
const showModal = ref(false);
const editInfo = ref({
  companyAddress: '',
  companyType: '',
  legalPerson: '',
  unitAddress: '',
  organizationType: '',
  establishDate: '',
  legalPersonId: '',
  businessScope: '',
  companyIntro: '',
  bankName: '',
  bankAddress: '',
  unitPhone: '',
  registeredCapital: null,
  paidCapital: null
});

const goToGrzx = () => {
  router.push('/grzx');
};

const goToQyxx = () => {
  router.push('/qyxx');
};

const goToParticipateBid = () => {
  router.push('/participateBid');
};

const goToMyBid = () => {
  router.push('/myBid');
};

const submitEdit = () => {
  console.log('提交修改:', editInfo.value);
  // 提交逻辑
  showModal.value = false;
};

const handleFileUpload = (event) => {
  const file = event.target.files[0];
  // 处理文件上传逻辑
  console.log(file);
};
</script>

<style scoped>
/* 基础样式重置 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.qyxx-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  font-family: Arial, sans-serif;
  padding: 20px;
}

.breadcrumb-container {
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  font-size: 16px;
}

.breadcrumb-home {
  color: #999999;
  text-decoration: none;
  margin-right: 10px;
}

.breadcrumb-middle {
  color: #666666;
  text-decoration: none;
  margin-right: 10px;
}

.return-button {
  background-color: #f4f4f4;
  color: #333;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  margin-left: 10px;
  transition: background-color 0.3s;
}

.return-button:hover {
  background-color: #eaeaea;
}

.breadcrumb-active {
  color: #333;
  font-weight: bold;
}

.user-center {
  display: flex;
  background-color: transparent;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.sidebar {
  background-color: #3fdcbd;
  padding: 30px 20px;
  width: 240px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  transition: width 0.3s ease;
}

.sidebar:hover {
  width: 260px;
}

.sidebar ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.sidebar-item {
  display: flex;
  align-items: center;
  margin: 25px 0;
  font-size: 18px;
  padding: 12px 15px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.sidebar-item.active {
  background-color: rgba(255, 255, 255, 0.2);
  color: #16a51b;
}

.sidebar-item:hover {
  background-color: rgba(255, 255, 255, 0.1);
  transform: translateX(5px);
}

.sidebar-icon {
  width: 24px;
  height: 24px;
  margin-right: 15px;
  background-color: white;
  border-radius: 4px;
}

.sidebar-text {
  color: black;
}

.company-info {
  padding: 30px;
  flex-grow: 1;
  background-color: white;
  border-radius: 0 8px 8px 0;
}

.company-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.company-name,
.credit-code {
  display: flex;
  align-items: center;
}

.info-columns {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.info-column {
  width: 48%;
}

.info-row {
  display: flex;
  margin-bottom: 15px;
}

.info-label {
  min-width: 120px;
  text-align: left;
  color: #666;
  margin-right: 10px;
}
  .info-value {
color: #333;
}

.view-img-link {
color: #007bff;
text-decoration: none;
transition: color 0.3s;
}

.view-img-link:hover {
color: #0056b3;
}

.edit-button-container {
text-align: right;
margin-top: 20px;
}

.edit-button {
background-color: #1abc9c;
color: white;
border: none;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s;
}

.edit-button:hover {
background-color: #16a085;
}

.modal-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
display: flex;
justify-content: center;
align-items: center;
z-index: 1000;
}

.modal {
background-color: white;
padding: 30px;
border-radius: 8px;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
width: 80%;
max-width: 1000px;
max-height: 90vh;
overflow-y: auto;
}

.modal h3 {
margin-bottom: 20px;
text-align: left;
font-size: 22px;
}

.close-button {
position: absolute;
top: 15px;
right: 15px;
background: none;
border: none;
font-size: 24px;
cursor: pointer;
transition: color 0.3s;
}

.close-button:hover {
color: #ff4d4f;
}

.form-group {
margin-bottom: 20px;
display: flex;
flex-direction: column;
align-items: flex-start;
}

.form-group label {
margin-bottom: 8px;
font-weight: 600;
font-size: 16px;
}

.form-group input,
.form-group select,
.form-group textarea {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
font-size: 16px;
}

.form-columns {
display: flex;
justify-content: space-between;
gap: 20px;
}

.info-column {
width: 48%;
}

.info-column.left {
margin-right: 2%;
}

.form-buttons {
display: flex;
justify-content: flex-end;
margin-top: 20px;
}

.form-buttons button {
padding: 8px 16px;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
transition: background-color 0.3s;
}

.form-buttons button:first-child {
background-color: #f4f4f4;
margin-right: 15px;
color: #333;
}

.form-buttons button:first-child:hover {
background-color: #eaeaea;
}

.form-buttons button:last-child {
background-color: #28a745;
color: white;
}

.form-buttons button:last-child:hover {
background-color: #218838;
}
</style>